<template>
 <div class="">
   <div class="touch-movue-left-right"
       @touchstart="touchStart($event)"
       @touchend="touchEnd($event)"
       @touchmove="touchMove($event)"
   :style="{'left': moveMar +'px'}">
   <slot></slot>
   </div>
 </div>
</template>

<script>
export default {
 props: {
   menuWidth: {
     type: Number,
     default: 0
   }
 },
 data() {
   return {
     startX: 0,
     moveMar: 0
   }
 },
 mounted() {
   console.log(this.menuWidth);
 },
 methods: {
   touchStart(e){
    this.startX = e.targetTouches[0].pageX;
   },
   touchMove(e){
     console.log(e);
     this.moveMar = e.targetTouches[0].pageX - this.startX; 
   },
   touchEnd(e){
     if(this.moveMar > 0){
       this.moveMar = 0
     } 
   },
 }
}

</script>

<style scoped>
.touch-movue-left-right{
  position: relative;
  margin-top: 6vh;
  width: 100%;
}
</style>
